<template>
    <div id="data_nav">
        <div id="organ-data" class="web-box">
            <h2>官方机构数据</h2>
            <div class="boundary"></div>
            <ul>
                <li>
                    <a href="http://www.stats.gov.cn/" target="_Blank">国家统计局</a>
                </li>
                <li>
                    <a href="http://tjj.zj.gov.cn/" target="_Blank">浙江统计局</a>
                </li>
                <li>
                    <a href="http://tj.jiangsu.gov.cn/" target="_Blank">江苏统计局</a>
                </li>
                <li>
                    <a href="https://tjj.sh.gov.cn/" target="_Blank">上海市统计局</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="http://www.moe.gov.cn/jyb_sjzl/" target="_Blank">国家教育部</a>
                </li>
                <li>
                    <a href="http://www.mof.gov.cn/gkml/caizhengshuju/" target="_Blank">国家财政部</a>
                </li>
                <li>
                    <a href="https://www.ndrc.gov.cn/fgsj/" target="_Blank">国家发改委</a>
                </li>
                <li>
                    <a href="https://wap.miit.gov.cn/gxsj/index.html" target="_Blank">国家工信部</a>
                </li>
            </ul>
        </div>
        <div id="internet-index" class="web-box">
            <h2>互联网指数</h2>
            <div class="boundary"></div>
            <ul>
                <li>
                    <a href="https://index.baidu.com/v2/index.html" target="_blank">百度指数</a>
                </li>
                <li>
                    <a href="https://trends.so.com/?src=index.so.com" target="_blank">360趋势</a>
                </li>
                <li>
                    <a href="https://trendinsight.oceanengine.com/arithmetic-index" target="_blank">巨量算数</a>
                </li>
                <li>
                    <a href="https://www.dianchacha.com/" target="_blank">店查查</a>
                </li>
            </ul>
        </div>
        <div id="economic-data" class="web-box">
            <h2>经济数据</h2>
            <div class="boundary"></div>
            <ul>
                <li>
                    <a href="https://vip.stock.finance.sina.com.cn/mkt/" target="_blank">新浪财经</a>
                </li>
                <li>
                    <a href="http://data.10jqka.com.cn/" target="_blank">同花顺数据</a>
                </li>
                <li>
                    <a href="https://www.eastmoney.com/" target="_blank">东方财富</a>
                </li>
                <li>
                    <a href="https://stockapp.finance.qq.com/mstats/" target="_blank">腾讯证券</a>
                </li>
            </ul>
        </div>
        <div id="data-forum" class="web-box">
            <h2>数据论坛</h2>
            <div class="boundary"></div>
            <ul>
                <li>
                    <a href="https://xueqiu.com/" target="_blank">雪球社区</a>
                </li>
                <li>
                    <a href="https://bbs.pinggu.org/" target="_blank">经管之家</a>
                </li>
                <li>
                    <a href="https://www.heywhale.com/about" target="_blank">和鲸社区</a>
                </li>
                <li>
                    <a href="https://tianchi.aliyun.com/" target="_blank">阿里云天池</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="https://ask.hellobi.com/question" target="_blank">天善智能</a>
                </li>
            </ul>
        </div>
        <div id="questionnaire" class="web-box">
            <h2>在线问卷</h2>
            <div class="boundary"></div>
            <ul>
                <li>
                    <a href="https://www.wjx.cn/" target="_blank">问卷星</a>
                </li>
                <li>
                    <a href="https://wj.qq.com/" target="_blank">腾讯问卷</a>
                </li>
                <li>
                    <a href="https://www.lediaocha.com/" target="_blank">乐调查</a>
                </li>
                <li>
                    <a href="https://fanqier.cn/" target="_blank">番茄表单</a>
                </li>
            </ul>
        </div>
        <div id="lower"></div>
    </div>
    
</template>

<script>
export default {
    name: 'DataNavigation',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style scoped>
#data_nav {
    width: 100%;
    height: 100%;
}
.web-box {
    width: 80%;
    height: 30%;
    margin: 10px;
    position: relative;
    top: 5%;
    left: 10%;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    box-shadow: 0px 3px 5px rgb(127, 127, 127);
}


h2 {
    position: relative;
    padding: 10px 0px 5px 20px;
    margin: 5px;
}


.boundary {
    
    width: 95%;
    height: 3px;
    margin: auto;
    border-top: 2px solid rgb(158, 154, 154);
}


ul {
    display: flex;
    list-style-type: none;
    padding: 20px 0px 20px 35px;
    margin: auto;
}


li {
    flex: 30%;
    display: inline-block;
}


a {
    text-decoration: none;
    padding: 2px 0px 2px 12px;
    border-left: 4px solid rgb(127, 127, 127);
    color: rgb(27, 27, 27);
    font: 500 22px "Microsoft YaHei";
}


a:hover {
    text-decoration: none;
    padding: 2px 0px 2px 12px;
    border-left: 4px solid rgb(65, 184, 131);
    color: rgb(65, 184, 131);
    font: 500 22px "Microsoft YaHei";
}


#lower {
    width: 100%;
    height: 20%;
}


</style>